<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小糯米一周岁生日</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">

    <!-- 配置Tailwind -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#FF6B9B',
                        secondary: '#6BCBFF',
                        accent: '#FFD66B',
                        purple: '#A78BFA',
                        green: '#6BFFB8'
                    },
                    fontFamily: {
                        cute: ['"Comic Sans MS"', '"Bubblegum Sans"', 'cursive'],
                    }
                }
            }
        }
    </script>

    <style type="text/tailwindcss">
        @layer utilities {
            .card-hover {
                transition: all 0.3s ease;
            }
            .card-hover:hover {
                transform: translateY(-10px) scale(1.02);
            }
            .floating {
                animation: floating 3s ease-in-out infinite;
            }
            .floating-delay-1 {
                animation: floating 3s ease-in-out 0.5s infinite;
            }
            .floating-delay-2 {
                animation: floating 3s ease-in-out 1s infinite;
            }
        }

        @keyframes floating {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-15px); }
        }
    </style>
</head>
<body class="bg-gradient-to-br from-pink-50 to-purple-50 min-h-screen font-cute overflow-x-hidden">
    <!-- 背景音乐 -->
    <audio id="background-music" loop>
        <source src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3" type="audio/mpeg">
    </audio>

    <!-- 装饰元素 -->
    <div class="fixed top-10 left-5 w-16 h-16 bg-primary/20 rounded-full floating"></div>
    <div class="fixed top-40 right-10 w-20 h-20 bg-secondary/20 rounded-full floating-delay-1"></div>
    <div class="fixed bottom-20 left-1/4 w-18 h-18 bg-accent/20 rounded-full floating-delay-2"></div>

    <!-- 主内容 -->
    <div class="container mx-auto px-4 py-12 relative z-10">
        <!-- 标题区域 -->
        <div class="text-center mb-16">
            <div class="inline-block relative mb-6">
                <i class="fa fa-birthday-cake text-6xl text-accent absolute -top-6 -left-6"></i>
                <h1 class="text-[clamp(2.5rem,8vw,4rem)] font-bold text-primary">小糯米的一岁生日</h1>
                <i class="fa fa-gift text-6xl text-purple absolute -bottom-6 -right-6"></i>
            </div>
            <p class="text-gray-600 text-xl max-w-2xl mx-auto">欢迎来到小糯米的生日庆祝网站，探索各个精彩板块吧！</p>
        </div>

        <!-- 导航卡片区域 -->
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 max-w-6xl mx-auto">
            <!-- 邀请函卡片 -->
            <a href="invitation.html" class="block">
                <div class="bg-white rounded-2xl shadow-xl overflow-hidden card-hover h-full">
                    <div class="h-48 bg-gradient-to-r from-primary to-purple flex items-center justify-center">
                        <i class="fa fa-envelope text-white text-8xl"></i>
                    </div>
                    <div class="p-6">
                        <h3 class="text-2xl font-bold text-primary mb-2">生日邀请函</h3>
                        <p class="text-gray-600">查看生日派对详情，还有有趣的互动小游戏哦！</p>
                    </div>
                </div>
            </a>

            <!-- 照片 gallery 卡片 -->
            <a href="gallery.html" class="block">
                <div class="bg-white rounded-2xl shadow-xl overflow-hidden card-hover h-full">
                    <div class="h-48 bg-gradient-to-r from-secondary to-green flex items-center justify-center">
                        <i class="fa fa-camera text-white text-8xl"></i>
                    </div>
                    <div class="p-6">
                        <h3 class="text-2xl font-bold text-primary mb-2">成长照片集</h3>
                        <p class="text-gray-600">浏览小糯米从出生到一岁的珍贵照片回忆</p>
                    </div>
                </div>
            </a>

            <!-- 视频卡片 -->
            <a href="videos.html" class="block">
                <div class="bg-white rounded-2xl shadow-xl overflow-hidden card-hover h-full">
                    <div class="h-48 bg-gradient-to-r from-accent to-primary flex items-center justify-center">
                        <i class="fa fa-video-camera text-white text-8xl"></i>
                    </div>
                    <div class="p-6">
                        <h3 class="text-2xl font-bold text-primary mb-2">精彩视频集锦</h3>
                        <p class="text-gray-600">观看小糯米的可爱瞬间和成长记录视频</p>
                    </div>
                </div>
            </a>

            <!-- 祝福墙卡片 -->
            <a href="wishes.html" class="block">
                <div class="bg-white rounded-2xl shadow-xl overflow-hidden card-hover h-full">
                    <div class="h-48 bg-gradient-to-r from-purple to-secondary flex items-center justify-center">
                        <i class="fa fa-heart text-white text-8xl"></i>
                    </div>
                    <div class="p-6">
                        <h3 class="text-2xl font-bold text-primary mb-2">祝福留言墙</h3>
                        <p class="text-gray-600">写下你对小糯米的美好祝福和生日愿望</p>
                    </div>
                </div>
            </a>

            <!-- 惊喜卡片 -->
            <a href="surprise.html" class="block">
                <div class="bg-white rounded-2xl shadow-xl overflow-hidden card-hover h-full">
                    <div class="h-48 bg-gradient-to-r from-green to-accent flex items-center justify-center">
                        <i class="fa fa-star text-white text-8xl"></i>
                    </div>
                    <div class="p-6">
                        <h3 class="text-2xl font-bold text-primary mb-2">惊喜彩蛋</h3>
                        <p class="text-gray-600">探索这里，发现为小糯米准备的特别惊喜</p>
                    </div>
                </div>
            </a>
        </div>

        <!-- 生日倒计时 -->
        <div class="max-w-3xl mx-auto mt-16 bg-white rounded-2xl shadow-lg p-6 md:p-8">
            <h3 class="text-2xl font-bold text-center text-primary mb-6">距离生日还有</h3>
            <div class="flex justify-center gap-4 md:gap-8">
                <div class="bg-gradient-to-br from-primary/10 to-primary/30 rounded-xl p-4 w-20 text-center">
                    <div id="days" class="text-3xl font-bold text-primary"></div>
                    <div class="text-sm text-gray-500">天</div>
                </div>
                <div class="bg-gradient-to-br from-primary/10 to-primary/30 rounded-xl p-4 w-20 text-center">
                    <div id="hours" class="text-3xl font-bold text-primary"></div>
                    <div class="text-sm text-gray-500">时</div>
                </div>
                <div class="bg-gradient-to-br from-primary/10 to-primary/30 rounded-xl p-4 w-20 text-center">
                    <div id="minutes" class="text-3xl font-bold text-primary"></div>
                    <div class="text-sm text-gray-500">分</div>
                </div>
                <div class="bg-gradient-to-br from-primary/10 to-primary/30 rounded-xl p-4 w-20 text-center">
                    <div id="seconds" class="text-3xl font-bold text-primary"></div>
                    <div class="text-sm text-gray-500">秒</div>
                </div>
            </div>
        </div>
    </div>

    <script>
        // 页面数据
        let pageData = null;
        // 生日日期
        let birthdayDate = null;

        // DOM加载完成后初始化
        document.addEventListener('DOMContentLoaded', function() {
            // 加载页面数据
            fetch('data/content.json')
                .then(response => {
                    if (!response.ok) throw new Error('数据加载失败');
                    return response.json();
                })
                .then(data => {
                    pageData = data;
                    birthdayDate = new Date(data.birthday);

                    // 开始倒计时
                    startCountdown();
                })
                .catch(error => {
                    console.error('初始化失败:', error);
                    alert('页面加载失败，请刷新重试');
                });

            // 播放背景音乐
            const music = document.getElementById('background-music');
            music.volume = 0.3;
            music.play().catch(e => {
                console.log('需要用户交互才能播放音乐:', e);
                document.addEventListener('click', () => {
                    music.play();
                }, { once: true });
            });
        });

        // 倒计时功能
        function startCountdown() {
            function updateCountdown() {
                const now = new Date();
                const diff = birthdayDate - now;

                // 如果生日已过，显示0
                if (diff <= 0) {
                    document.getElementById('days').textContent = '0';
                    document.getElementById('hours').textContent = '0';
                    document.getElementById('minutes').textContent = '0';
                    document.getElementById('seconds').textContent = '0';
                    return;
                }

                // 计算天、时、分、秒
                const days = Math.floor(diff / (1000 * 60 * 60 * 24));
                const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
                const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
                const seconds = Math.floor((diff % (1000 * 60)) / 1000);

                // 更新显示
                document.getElementById('days').textContent = days;
                document.getElementById('hours').textContent = hours.toString().padStart(2, '0');
                document.getElementById('minutes').textContent = minutes.toString().padStart(2, '0');
                document.getElementById('seconds').textContent = seconds.toString().padStart(2, '0');
            }

            // 立即更新一次
            updateCountdown();
            // 每秒更新一次
            setInterval(updateCountdown, 1000);
        }
    </script>
</body>
</html>